<script setup lang="ts">
import { ref, watch, onMounted, useTemplateRef } from 'vue'
import VditorPreview from 'vditor/dist/method'


const props = withDefaults(defineProps<{
    content: string
}>(), {
    content: '未传入内容'
})

const view = useTemplateRef('view')

onMounted(() => {

    VditorPreview.preview(view.value as HTMLDivElement, props.content, {
        mode: "light",
        cdn: "http://test.code9.top/cdn/vditor",
        hljs: {
            enable: true,
            style: "atom-one-dark"
        }
    })

    watch(() => props.content, () => {
        VditorPreview.preview(view.value as HTMLDivElement, props.content, {
            mode: "light",
            cdn: "http://test.code9.top/cdn/vditor",
            hljs: {
                enable: true,
                style: "atom-one-dark"
            }
        })
    })
})

</script>

<template>
    <div ref="view"> </div>
</template>